<template>
    <div class="chartsetting">
        <el-card class="box-card">
            <el-button type="primary" @click="add" size="large" class="mb10">添加</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号" width="180" align="center"> </el-table-column>
                <el-table-column prop="img" label="图片" width="180" align="center">
                    <template slot-scope="scope">
                        <img class="wh100" :src="scope.row.img" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="类别" align="center"> </el-table-column>
                <el-table-column prop="nativeUrl" label="跳转链接" align="center"> </el-table-column>
                <el-table-column prop="level" label="排序" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row)">修改</el-button>
                        <el-button type="primary" @click="dele(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 修改或者添加Banner信息 -->
        <el-dialog
            v-dialogDrag
            :title="isEditSlide ? '修改Banner信息' : '添加Banner'"
            :visible.sync="dialogVisible"
            width="50%"
            @close="diaClosed"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类别">
                    <el-select class="wh180" v-model="form.category" placeholder="请选择类别">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Banner图:" class="por">
                    <img class="wh100 vac" :src="form.img" alt="" />
                    <el-button type="primary" class="fix" @click="$refs.upload.click()" size="large">上传</el-button>
                    <input type="file" ref="upload" id="upload" style="display: none" @change="uploadImg" />
                </el-form-item>
                <el-form-item label="跳转链接:">
                    <el-input v-model="form.nativeUrl"></el-input>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="form.level"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="isEditSlide" type="primary" @click="confirmEdit">确 定</el-button>
                <el-button v-else type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getSlideList, loadAllType, updateBanner, addBanner, uploadPic } from '@/api/system.js';
export default {
    name: 'chartsetting',
    data() {
        return {
            tableData: [],
            isEditSlide: true,
            dialogVisible: false,
            form: {},
            options: [],
            img: '',
            bannerId: null
        };
    },
    created() {
        this.getSlideList();
        this.loadAllType();
    },
    mounted() {},
    methods: {
        // 获取轮播图列表
        async getSlideList() {
            const { Data } = await getSlideList();
            console.log(Data);
            this.tableData = Data.list;
        },

        // 加载所有类别
        async loadAllType() {
            const { Data } = await loadAllType();
            console.log(Data);
            this.options = Data.dictList;
        },

        // 修改轮播图
        edit(slideDetail) {
            this.bannerId = slideDetail.id;
            this.isEditSlide = true;
            this.dialogVisible = true;
            this.form = slideDetail;
        },

        add() {
            this.isEditSlide = false;
            this.dialogVisible = true;
        },

        diaClosed() {
            console.log(11);
            this.form = {};
        },

        // 删除轮播图
        dele() {},

        // 上传图片
        upload() {
            console.log(11);
        },

        // 确认修改
        async confirmEdit() {
            const data = await updateBanner({
                id: this.bannerId,
                category: this.form.category,
                img: this.form.img,
                nativeUrl: this.form.nativeUrl,
                level: this.form.level
            });
            if (data.RequestStatus !== 200) return this.$message.error('修改轮播图失败');
            this.$message.success('修改轮播图成功');
            this.dialogVisible = false;
            this.getSlideList();
            console.log(data);
        },

        // 确认添加
        async confirmAdd() {
            const { Data } = await addBanner({
                category: this.form.category,
                img: this.form.img,
                nativeUrl: this.form.nativeUrl,
                level: this.form.level
            });
            console.log(Data);
        }, // 获取被选择的图片
        async uploadImg(e) {
            const file = e.target.files[0];
            console.log(file);
            const data = await uploadPic({
                category: 10,
                file: file
            });
            console.log(data);
        }
    }
};
</script>

<style scoped>
.wh100 {
    width: 100px;
    height: 100px;
}
.wh180 {
    width: 190px;
    margin-right: 35px;
}
.mb10 {
    margin-bottom: 10px;
}

.el-form {
    display: flex;
    flex-wrap: wrap;
}
.el-form--inline .el-form-item {
    display: flex;
    flex: 70%;
}
.el-form--inline .el-form-item {
    margin-right: 0px;
}
.el-input__inner {
    padding: 0 30px;
}
.el-form-item__content {
    flex: 1;
}
</style>
